<template>
	<view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
			<u-popup :show="showService" :round="10" mode="center">
				<view style="width: 600rpx; height: 800rpx">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item label="内容" borderBottom ref="item1">
							<u--input v-model="cause" border="none"></u--input>
						</u-form-item>
						<u-form-item label="维修图片" borderBottom ref="item1">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
						</u-form-item>
					</u--form>
					<u-button @click="submit">提交</u-button>
				</view>
			</u-popup>
		</view>
		<uni-section title="工单信息" type="line" padding>
			<uni-steps :options="list1" :active="active" />
			<uni-card title="操作记录" :thumbnail="avatar">
				<!-- <text>1111{{ deviceInform.name }}</text> -->
				<view style="display: flex; flex-direction: column" v-for="(item, index) in OrderInfoList" :key="index">
					<text>订单号：{{ item.oid }}</text>
					<text>创建人：{{ item.createBy }}</text>
					<text>最新操作时间：{{ item.updateTime }}</text>
					<text>备注：{{ item.remark }}</text>
				</view>
			</uni-card>
		</uni-section>

		<uni-card title="工单信息" :thumbnail="avatar">
			<view class="order-txt">
				<text class="">标题：{{ cusinform.title }}</text>
				<text class="">内容：{{ cusinform.content }}</text>
				<text class="">创建人：{{ cusinform.defaultAddress.userName }}</text>
				<text class="">联系电话：{{ cusinform.defaultAddress.phone }}</text>
				<text class="">订单号：{{ cusinform.orderNum }}</text>
				<text class="">创建时间：{{ cusinform.createTime }}</text>
			</view>
		</uni-card>
		<uni-card v-show="cusinform.state == 3 || cusinform.state == 4 || cusinform.state == 5" title="维修信息" :thumbnail="avatar">
			<view class="order-txt">
				<text class="">维修人：{{ cusinform.serviceName }}</text>
				<text class="">故障原因：{{ cusinform.cause }}</text>
				<text class="">创建人：{{ cusinform.defaultAddress.userName }}</text>
				<text class="">联系电话：{{ cusinform.servicephonenumber }}</text>
				<text class="">处理时间：{{ cusinform.acceptTime }}</text>
				<text class="">维修图片：</text>
				<u-album :urls="SerImgsData"></u-album>
			</view>
		</uni-card>

		<uni-card v-show="deviceShow" title="设备档案" :thumbnail="avatar">
			<view class="order-txt">
				<text class="">设备名称：{{ deviceInform.name }}</text>
				<text class="">类型：{{ deviceInform.deviceClass.typeName }}</text>
				<text class="">创建人：{{ deviceInform.createBy }}</text>
				<text class="">工厂：{{ deviceInform.manufacturer }}</text>
				<text class="">创建时间：{{ deviceInform.createTime }}</text>
			</view>
		</uni-card>

		<!-- <u--text text="uView UI" type="primary" bold size="17"></u--text> -->
		<u-album :urls="imgsData"></u-album>

		<!-- <u-album :urls="videoData"></u-album> -->
		<view v-show="voiceShow" class="page-section page-section-gap" style="text-align: center">
			<WzsAudio :music="voiceSrc" :autoplay="true"></WzsAudio>
			<!-- <audio style="text-align: left" :src="voiceSrc" :poster="cusinform.poster" :name="current.name" author="暂无" :action="audioAction" controls></audio> -->
		</view>
		<view v-show="videoShow">
			<video v-for="item in videoData" id="myVideo" :src="item" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
		</view>
		<button @click="showService = true" v-show="cusinform.state == 3 && showBtn">处理</button>
	</view>
</template>

<script>
import { getdeviceInfo, getOrderInfoList, updateService, uploadFile } from '@/api/system/user.js';
import WzsAudio from '@/components/WZS-Audio/WZS-Audio.vue';
import store from '@/store/index.js';
export default {
	components: {
		WzsAudio
	},
	data() {
		return {
			// model1: {
			// 		cause: '',
			// 		state:'4',
			// 		servicePicture:''

			// },
			fileList1: [],
			imageValue: [],
			picTxt: '',
			cause: '',
			// ServiceState: '',
			servicePicture: '',
			active: 0,
			deviceShow: true,
			videoShow: true,
			voiceShow: true,
			showBtn: true,
			deviceInform: '',
			// serviceInform: '',
			type: 'center',
			msgType: 'success',
			messageText: '这是一条成功提示',
			voiceSrc: '',
			videoData: [],
			imgsData: [],
			SerImgsData: [],
			cusinform: '',
			OrderInfoList: '',
			value: '',
			showService: false,
			list1: [
				{
					title: '待派发'
				},
				{
					title: '待处理'
				},
				{
					title: '处理中'
				},
				{
					title: '待评价'
				},
				{
					title: '已完结'
				}
			]
		};
	},
	// computed: {
	// 	CusImform() {
	// 		return this.$store.state.CusImform;
	// 	}
	// },
	// watch: {
	// 	CusImform() {
	// 		this.cusinform = store.state.CusImform;
	// 	}
	// },
	onLoad() {
		setTimeout(() => {
			this.getDetail();
		}, 500);
	},
	methods: {
		getDetail() {
			this.cusinform = store.state.CusImform;
			this.getInfoList();
			this.voiceSrc = this.cusinform.voice;
			this.voiceSrc ? '' : (this.voiceShow = false);
			console.log('this.voiceSrc', this.voiceSrc);
			console.log('this.voiceShow', this.voiceShow);
			this.active = this.cusinform.state - 1;
			if (this.cusinform.deviceId == null) {
				this.deviceShow = false;
				this.msgType = 'error';
				this.messageText = `该工单没有绑定设备！`;
				this.$refs.message.open();
			} else {
				getdeviceInfo(this.cusinform.deviceId).then((res) => {
					this.deviceInform = res.data;
					console.log('res:', res.data);
				});
			}
			// getService(this.cusinform.id).then((res) => {
			// 	this.serviceInform = res.data
			// 	console.log('getService', res);
			// });
			if (!this.cusinform.video) {
				this.videoShow = false;
			} else if (this.cusinform.video.indexOf(',') > -1) {
				this.cusinform.video.split(',').map((t) => {
					this.videoData.push(t);
					console.log('this.videoData', this.videoData);
				});
			} else {
				this.videoData[0] = this.cusinform.video;
			}
			if (!this.cusinform.picture) {
				// this.videoShow = false;
			} else if (this.cusinform.picture.indexOf(',') > -1) {
				this.cusinform.picture.split(',').map((t) => {
					this.imgsData.push(t);
					// console.log('this.imgsData', this.imgsData);
				});
			} else {
				this.imgsData[0] = this.cusinform.picture;
			}
			if (!this.cusinform.servicePicture) {
				// this.videoShow = false;
			} else if (this.cusinform.servicePicture.indexOf(',') > -1) {
				this.cusinform.servicePicture.split(',').map((t) => {
					this.SerImgsData.push(t);
					// console.log('this.imgsData', this.imgsData);
				});
			} else {
				this.SerImgsData[0] = this.cusinform.servicePicture;
			}
		},
		async getInfoList() {
			await getOrderInfoList(this.cusinform.orderNum).then((res) => {
				this.OrderInfoList = res.data;
				console.log('this.OrderInfoList:', this.OrderInfoList);
			});
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			// const result = '';
			for (let i = 0; i < lists.length; i++) {
				const result = await uploadFile(lists[i].url).then((res) => {
					// console.log(res);
					return res.url;
				});
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
				console.log('fileList1', this.fileList1);
			}
		},
		submit() {
			this.fileList1.map((item) => {
				this.imageValue.push(item.url);
			});
			this.picTxt = this.imageValue.toString();
			let data = {
				id: this.cusinform.id,
				servicePicture: this.picTxt,
				state: 4,
				cause: this.cause
			};
			updateService(data).then((res) => {
				this.showService = false;
				this.msgType = 'success';
				this.messageText = `提交成功`;
				this.$refs.message.open();
				this.showBtn = false;
			});
			console.log('data', data);
		},
		audioAction: {
			method: 'pause'
		}
	}
};
</script>

<style lang="scss">
.order-txt {
	display: flex;
	flex-direction: column;
}
</style>
